<template>
    <div>
        <NavTop />
        <div class="common-layout">
            <el-container>
            <el-aside width="200px"><NavLeft @handle="dadHandle"/></el-aside>
            <el-container>
                <el-header><MySwiper /></el-header>
                <el-main><MyList :list="filterlist"/></el-main>
            </el-container>
            </el-container>
        </div>

    </div>
</template>


<script>
import axios from 'axios';
import NavTop from '@/components/NavTop.vue';
import NavLeft from '@/views/Home/components/NavLeft.vue';
import MySwiper from '@/views/Home/components/MySwiper.vue';
import MyList from '@/views/Home/components/MyList.vue';
export default {
    components:{
        NavTop,
        NavLeft,
        MySwiper,
        MyList
    },
    methods:{
        dadHandle(val){
            this.filterlist = this.list.filter(v=>v.cid==val) //根据传递过来的商品类别在原始数据中进行筛选，获得符合条件的商品
            //获得筛选后的数据放到filterlist中，然后再通过父传子传递给子组件
            console.log(this.filterlist);
        }
    },
    mounted(){
        axios.get('goodslist.json').then(res=>{
            this.list = res.data.goodslist
            this.filterlist = this.list
        })
    },
    data() {
        return {
            list:[],
            filterlist:[]
        }
    },
}
</script>

<style scoped>
.el-header{
    --el-header-padding:0;
    height:300px;

}
.el-main{
    background-color: rgb(252, 250, 221);
}
.el-aside{
    background-color: rgb(252, 250, 221);
}
</style>